<!-- 注意：本内容仅限于博也公司内部传阅,禁止外泄以及用于其他的商业目的
  Copyright:  www.itboye.com Boye Inc. All rights reserved.
 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>森森设备分布图</title>
  <!--引入百度地图的jssdk，这里需要使用你在百度地图开发者平台申请的 ak-->
<script src="http://api.map.baidu.com/api?v=2.0&ak=KWNfIFxzOQrApSwVEhkw8nziMd5nGg3t"></script>
  <style type="text/css">
    .map-filter{
      margin: auto;
      width: 1200px;
    }
      label {
          cursor: pointer;
      }
  </style>
</head>
<body>
    <div style="">
    <div class="map-filter">
      <form id="j_filter_form" method="post" action="{:url()}">
          <div>
      设备did:
            <label>
            <input onchange="document.getElementById('j_filter_form').submit()" type="text"  class="" value="{$did}" name="did" />
            </label>
              延时值大于
            <label>
            <input onchange="document.getElementById('j_filter_form').submit()" type="text"  class="" value="{$delay}" name="delay" />ms
            </label>
              IP
            <label>
            <input onchange="document.getElementById('j_filter_form').submit()" type="text"  class="" value="{$ip}" name="ip" />
            </label>
          </div>
          <div>
      登录时间:
            <label>
            <input onchange="document.getElementById('j_filter_form').submit()" type="radio" {eq name="day" value="1"}checked{/eq} class="j_day" value="1" name="day" /> 今天</label>
            <label>
            <input onchange="document.getElementById('j_filter_form').submit()" type="radio" {eq name="day" value="30"}checked{/eq} class="j_day" value="30" name="day" /> 最近30天</label>
            <label>
            <input onchange="document.getElementById('j_filter_form').submit()" type="radio" {eq name="day" value="180"}checked{/eq} class="j_day" value="180" name="day" /> 最近180天</label>
          </div>

          <div>
      设备类型:
            <label>
            <input onchange="document.getElementById('j_filter_form').submit()" type="radio" {eq name="d_type" value=""}checked{/eq} class="j_day" value="" name="d_type" /> 全部</label>
            <label>
            <input onchange="document.getElementById('j_filter_form').submit()" type="radio" {eq name="d_type" value="aq806"}checked{/eq} class="j_day" value="aq806" name="d_type" /> a:aq806</label>
            <label>
            <input onchange="document.getElementById('j_filter_form').submit()" type="radio" {eq name="d_type" value="adt"}checked{/eq} class="j_day" value="adt" name="d_type" /> d:adt</label>
            <label>
            <input onchange="document.getElementById('j_filter_form').submit()" type="radio" {eq name="d_type" value="aph300"}checked{/eq} class="j_day" value="aph300" name="d_type" /> b:aph300</label>
            <label>
            <input onchange="document.getElementById('j_filter_form').submit()" type="radio" {eq name="d_type" value="cp1000"}checked{/eq} class="j_day" value="cp1000" name="d_type" /> c:cp1000</label>
            <label>
            <input onchange="document.getElementById('j_filter_form').submit()" type="radio" {eq name="d_type" value="filter"}checked{/eq} class="j_day" value="filter" name="d_type" /> f:filter</label>
            <label>
            <input onchange="document.getElementById('j_filter_form').submit()" type="radio" {eq name="d_type" value="heating"}checked{/eq} class="j_day" value="heating" name="d_type" /> h:heating</label>

            <label>
            <input onchange="document.getElementById('j_filter_form').submit()" type="radio" {eq name="d_type" value="water_pump"}checked{/eq} class="j_day" value="water_pump" name="d_type" /> w:water_pump</label>
          </div>
        </form>
    </div>
    <div id="main" style="width: 1200px;height:560px;margin:auto;">

    </div>
    </div>
<!-- 引入 ECharts -->
<script src="__JS__/3.8.5/echarts.min.js"></script>
<!-- 引入百度地图扩展 -->
<script src="__JS__/3.8.5/extension/bmap.min.js"></script>

<script type="text/javascript">

  var convertData = function (today) {
      let jsonData = '[]';
      if (today) {
          jsonData = '{$today_data}';
      } else {
          jsonData = '{$data}';
      }
      let data = JSON.parse(jsonData);
      console.log(data);
      return data;
  };

  option = {
      title: {
          text: '森森设备分布图('+"{$total}台)",
          subtext: '',
          sublink: '',
          left: 'center'
      },
      legend: {
          data:['[aq806]'],
          type: 'scroll',
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
          zlevel: 10,
          z: 100000
      },
      tooltip : {
          trigger: 'item'
      },
      bmap: {
          center: [104.114129, 37.550339],
          zoom: 5,
          roam: true,
          mapStyle: {
              styleJson: [{
                  'featureType': 'water',
                  'elementType': 'all',
                  'stylers': {
                      'color': '#d1d1d1'
                  }
              }, {
                  'featureType': 'land',
                  'elementType': 'all',
                  'stylers': {
                      'color': '#f3f3f3'
                  }
              }, {
                  'featureType': 'railway',
                  'elementType': 'all',
                  'stylers': {
                      'visibility': 'off'
                  }
              }, {
                  'featureType': 'highway',
                  'elementType': 'all',
                  'stylers': {
                      'color': '#fdfdfd'
                  }
              }, {
                  'featureType': 'highway',
                  'elementType': 'labels',
                  'stylers': {
                      'visibility': 'off'
                  }
              }, {
                  'featureType': 'arterial',
                  'elementType': 'geometry',
                  'stylers': {
                      'color': '#fefefe'
                  }
              }, {
                  'featureType': 'arterial',
                  'elementType': 'geometry.fill',
                  'stylers': {
                      'color': '#fefefe'
                  }
              }, {
                  'featureType': 'poi',
                  'elementType': 'all',
                  'stylers': {
                      'visibility': 'off'
                  }
              }, {
                  'featureType': 'green',
                  'elementType': 'all',
                  'stylers': {
                      'visibility': 'off'
                  }
              }, {
                  'featureType': 'subway',
                  'elementType': 'all',
                  'stylers': {
                      'visibility': 'off'
                  }
              }, {
                  'featureType': 'manmade',
                  'elementType': 'all',
                  'stylers': {
                      'color': '#d1d1d1'
                  }
              }, {
                  'featureType': 'local',
                  'elementType': 'all',
                  'stylers': {
                      'color': '#d1d1d1'
                  }
              }, {
                  'featureType': 'arterial',
                  'elementType': 'labels',
                  'stylers': {
                      'visibility': 'off'
                  }
              }, {
                  'featureType': 'boundary',
                  'elementType': 'all',
                  'stylers': {
                      'color': '#fefefe'
                  }
              }, {
                  'featureType': 'building',
                  'elementType': 'all',
                  'stylers': {
                      'color': '#d1d1d1'
                  }
              }, {
                  'featureType': 'label',
                  'elementType': 'labels.text.fill',
                  'stylers': {
                      'color': '#999999'
                  }
              }]
          }
      },
      series : [
          {
              name: '设备信息',
              type: 'effectScatter',
              coordinateSystem: 'bmap',
              symbol: 'pin',
              large: false,
              largeThreshold: 10000,
              dimensions: ['经度', '纬度',  '最近延时', 'did', '城市','ip', '最近登录'],
              data: convertData(0),
              symbolSize: function (val) {
                  let size =  val[2] / 100;

                  if (size > 20) {
                      return 20;
                  }
                  if (size < 12) {
                      return 12;
                  }
                  return size;
              },
              tooltip: {
                  position: [10, 10]
              },
              showEffectOn: 'emphasis',
              rippleEffect: {
                  brushType: 'stroke'
              },
              hoverAnimation: false,
              label: {
                  normal: {
                      // formatter: '{b}',
                      // position: 'right',
                      // show: true
                      formatter: function(params) {
                          let shortName = {
                              '[aq806]': 'a',
                              '[adt]': 'd',
                              '[aph300]': 'b',
                              '[cp1000]': 'c',
                              '[filter]': 'f',
                              '[heating]': 'h',
                              '[water_pump]': 'w',
                          };

                          return shortName[params.name];
                      },
                      position: 'right',
                      show: true
                  }
              },
              itemStyle: {
                  normal: {
                      color: 'red',
                  }
              }
          }
      ]
  };

  var myChart = echarts.init(document.getElementById('main'));
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  var bmap = myChart.getModel().getComponent('bmap').getBMap();
  bmap.addControl(new BMap.MapTypeControl());

</script>
</body>
</html>